<template>
  <div class="box"
       :style="{ backgroundColor: food.backgroundColor }"
       @click="goToDetail">
    <div class="title">
      <h3>{{ food.name }}</h3>
      <p v-if="food.accessories">with {{ food.accessories }}</p>
    </div>
    <img :src="food.image" :alt="food.name" class="food-image"/>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { Food } from '@/data/foodData' // 导入 Food 类型

// 使用 defineProps 来定义组件的 props
const props = defineProps<{
  food: Food
}>()

const router = useRouter()

// 跳转到 FoodDetail 页面
const goToDetail = () => {
  router.push({
    name: 'FoodDetail',
    params: { slug: props.food.slug }
  })
}
</script>

<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
  padding: 40px 20px 20px 20px;
  cursor: pointer;

  &:hover {
    transform: scale(0.95); /* 悬停时缩小到原尺寸的95% */
  }
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;

  h3 {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2.8px; // 字母间距为 2.8 像素，增加字母之间的空隙
    line-height: 20px;
    margin: 0;
    padding: 0 22px;
  }

  p {
    color: #d7596e;
    font-size: 10px;
    font-weight: 500;
    line-height: 20px;
    margin: 5px 0;
  }
}

img {
  max-width: 100%;
  height: auto;
}
</style>
